<template>
	<!-- <view v-if="uniIDHasRole('admin')">仅管理员可见</view> -->
	<u-skeleton v-if="!arr" rows="5" title></u-skeleton>
	<view v-else class="container">
		<view class="title">{{arr.title}}</view>
		<view class="info">
			<view class="avatar">
				<image :src="arr.user_id[0].avatar_file.url"></image>
			</view>
			<view class="name">{{arr.user_id[0].nickname?arr.user_id[0].nickname:arr.user_id[0].username}}</view>
			<view class="time">{{arr.publish_date}}</view>
		</view>
		<view class="content">
			<u-parse :content="arr.content"></u-parse>
		</view>
		<view class="like">
			<view class="btn" :class="store.flag || islike?'':'active'" @click="$u.debounce(addlike,500)">
				<u-icon size="40" :name="store.flag?'thumb-up':'thumb-up-fill'"></u-icon>
				<view class="like_count">{{arr.like_count}}</view>
			</view>
		</view>
		<view class="view"></view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useStore } from '../../stores/store.js'
	import { data } from '../../uni_modules/uni-id-pages/common/store.js'
	const store = useStore()
	const obj = uniCloud.importObject('utils', { customUI: true })
	const db = uniCloud.database()
	let arr = ref()
	let count = store.flag
	let id = ref()
	let islike = ref()
	//根据id拿数据
	const getDate = async () => {
		const news = db.collection('articles').where(`_id == '${id.value}'`).getTemp()
		const user = db.collection('uni-id-users').field('_id,avatar_file,username,nickname').getTemp()
		const like = db.collection('like').getTemp()
		if (data.hasLogin) {
			await db.collection(news, user, like).get({ getOne: true }).then(res => {
				arr.value = res.result.data
				console.log(arr.value);
			})
		} else {
			await db.collection(news, user).get({ getOne: true }).then(res => {
				arr.value = res.result.data
				console.log(arr.value);
			})
		}
	}
	//点赞和取消点赞

	const addlike = async () => {

		if (!data.hasLogin) {
			uni.showModal({
				title: "未登录不能进行点赞,去登录?",
				success(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: "../../uni_modules/uni-id-pages/pages/login/login-withpwd"
						})
					}
				}
			})
			return
		}
		store.changeFlag()
		let res = await db.collection('like').where(
				`article_id == '${id.value}' && user_id == $cloudEnv_uid`)
			.count()
		islike.value = res.result.total
		console.log(res.result.total);
		if (res.result.total == 0) {
			await db.collection('like').add({
				article_id: id.value
			})
			//点赞数量增减
			obj.operation('articles', 'like_count', id.value, 1)
			arr.value.like_count++
			console.log(arr.value.like_count);

		} else {
			await db.collection('like').where(
				`article_id == '${id.value}' && user_id == $cloudEnv_uid`).remove()
			//点赞数量增减
			obj.operation('articles', 'like_count', id.value, -1)
			arr.value.like_count--
			console.log(arr.value.like_count);
		}
	}
	onLoad((e) => {
		id.value = e.id
		getDate()
		console.log(uniCloud.getCurrentUserInfo().role);
	})
</script>

<style scoped lang='scss'>
	.active {
		background-color: #0ff !important;
	}

	.container {
		margin: 0 10px;

		.title {
			font-size: 20px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.info {
			display: flex;
			flex-direction: row;
			align-items: center;

			.avatar {
				width: 40px;
				height: 40px;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.avatar,
			.name {
				margin-right: 10px;
			}
		}

		.content {
			line-height: 30px;
			text-indent: 2em;
		}

		.like {
			display: flex;
			justify-content: center;
			align-items: center;

			.btn {
				margin: auto;
				width: 200px;
				height: 100px;
				background-color: #ccc;
				border-radius: 30px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>